<html>
  <head>
    <meta charset="utf-8" />
    <title>昆山建皇光电OEE数据展示平台</title>
    <script src="./static/jquery.min.js"></script>
    <script src="./static/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/index.css" />
    <link rel="stylesheet" type="text/css" href="./static/layui/layui.css" />
    <link rel="stylesheet" type="text/css" href="./static/element/index.css" />
  </head>

  <body>
    <style>
      .kanban {
        width: 100%;
        height: 100%;
        background-image: url(./static/images/bg.jpg);
        background-size: cover;
        color: #666666;
      }

      .searchWrap {
        position: fixed;
        top: 1rem;
        z-index: 999;
      }

      .searchClass {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        margin-left: 1rem;
      }

      .searchName {
        margin-right: 0.2rem;
      }

      .el-form-item__label {
        color: #fff;
      }

      .el-input__inner {
        height: 30px;
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
      }

      .el-input__icon {
        line-height: 30px;
      }

      .main {
        width: 100%;
        height: 100%;
      }

      .canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
      }

      .small-font {
        font-size: 0.6rem !important;
      }

      .normal-font {
        font-size: 0.8rem !important;
      }

      .big-font {
        font-size: 1rem !important;
      }

      .header {
        height: 4rem;
        background: url(./static/images/head_bg.png) no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        z-index: 100;
      }

      .header h1 {
        color: #fff;
        text-align: center;
        font-size: 2rem;
        line-height: 4rem;
        cursor: pointer;
      }

      .logo {
        background-image: url(./static/images/kh_logo.png);
        background-repeat: no-repeat;
        background-size: auto 60%;
        position: absolute;
        left: 1rem;
        top: 1rem;
        padding-top: 1rem;
        height: 3rem;
        width: 10rem;
        z-index: 200;
      }

      .now-time {
        position: absolute;
        right: 1rem;
        top: 1rem;
        height: 2rem;
        color: #bbbbbb;
        font-size: 1rem;
        line-height: 2rem;
        z-index: 200;
      }

      .bar-row {
        display: flex;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0.8rem;
      }

      .barbox {
        padding: 0;
        flex: 1;
        margin-right: 0.8rem;
        position: relative;
      }

      .barbox:last-child {
        margin-right: 0;
      }

      .barbox:before,
      .barbox:after {
        position: absolute;
        width: 1.2rem;
        height: 0.4rem;
        content: '';
      }

      .barbox:before {
        border-left: 2px solid #02a6b5;
        left: 0;
        border-top: 2px solid #02a6b5;
      }

      .barbox:after {
        border-right: 2px solid #02a6b5;
        right: 0;
        bottom: 0;
        border-bottom: 2px solid #02a6b5;
      }

      .barbox li {
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 100;
        background: rgba(0, 255, 255, 0.2);
        line-height: 3rem;
      }

      .barbox li .title {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
      }

      .barbox li .counter {
        font-size: 1.2rem;
        /* font-family: electronicFont; */
        font-weight: bold;
      }

      .barbox li:first-child:before {
        position: absolute;
        content: '';
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
        right: 0;
        top: 25%;
      }

      .content {
        padding: 0 0.8rem;
      }

      .boxall {
        width: 100%;
        height: 100%;
        border: 1px solid rgba(25, 186, 139, 0.17);
        padding: 0 0.8rem;
        background: rgba(255, 255, 255, 0.04) url(./static/images/line.png);
        background-size: 100% auto;
        position: relative;
        z-index: 10;
      }

      .tabIcon {
        position: absolute;
        top: 0.8rem;
        left: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .boxall:before,
      .boxall:after {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        content: '';
        border-top: 2px solid #02a6b5;
        top: 0;
      }

      .boxall:before,
      .boxfoot:before {
        border-left: 2px solid #02a6b5;
        left: 0;
      }

      .boxall:after,
      .boxfoot:after {
        border-right: 2px solid #02a6b5;
        right: 0;
      }

      .alltitle {
        font-size: 1rem;
        color: #fff;
        text-align: center;
        line-height: 2rem;
        font-weight: 600;
      }

      .allnav {
        height: calc(100% - 2rem);
        overflow: hidden;
      }

      .allnav .layui-table {
        margin: 0;
      }

      .allnav .layui-table,
      .allnav .layui-table tbody tr:hover {
        background-color: transparent;
        color: #ccc;
      }

      .allnav .layui-table thead tr {
        background-color: rgba(0, 255, 255, 0.2);
      }

      .allnav .layui-table[lay-even] tr:nth-child(even) {
        background-color: rgba(0, 255, 255, 0.2);
      }

      .allnav .layui-table td {
        text-align: center;
        font-size: 1rem;
        line-height: 3rem;
        padding: 0;
      }

      .allnav .allnavTab {
        width: calc(33%);
        text-align: center;
        color: #fff;
      }

      .allnavTab {
        position: relative;
      }

      .titleContent {
        width: 200px;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 78%;
        font-size: 2.8rem;
        font-family: electronicFont;
        font-weight: bold;
        color: #ffb800;
      }

      .allnav .layui-table th {
        text-align: center;
        color: #02a6b5;
        font-weight: 800;
        font-size: 1rem;
        line-height: 3rem;
        padding: 0;
      }

      .boxfoot {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
      }

      .boxfoot:before,
      .boxfoot:after {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        content: '';
        border-bottom: 2px solid #02a6b5;
        bottom: 0;
      }

      .footer {
        height: 1rem;
        padding: 0.2rem 0;
        font-size: 0.6rem;
        text-align: center;
        color: #bbbbbb;
      }

      .avatar {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin: 1rem auto;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
      }
    </style>
    <!-- <div class="canvas" style="opacity: 0.2;">
      <iframe frameborder="0" src="./background.html" style="width: 100%; height: 100%;"></iframe>
    </div> -->
    <div id="app" class="kanban">
      <div class="searchWrap">
        <div class="searchClass" style="margin-left: 0;">
          <div class="searchClass">
            <el-date-picker
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              @change="searchData"
              v-model="query.day"
              type="date"
              :clearable="false"
              placeholder="选择日期"
              style="width: 160px;"
            >
            </el-date-picker>
          </div>
          <div class="searchClass" v-show="lineSelectShow">
            <el-select v-model="query.lineCode" placeholder="选择产品线" style="width: 140px;" @change="searchData">
              <el-option v-for="i in linelist" :key="i.line_code" :label="i.line_name" :value="i.line_code"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="header">
          <h1>{{ query.lineCode }}</h1>
        </div>
        <div class="now-time"><span>{{showData.today}}</span></div>
        <div class="content" style="height:calc(100% - 5rem);">
          <div class=" flex" style="height:calc(50%);">
            <div style="width: calc(40% - 0.4rem);height:100%;margin-right: 0.8rem;">
              <div style="width: 100%;height: calc(100% - 0.8rem);">
                <div style="height: calc(100%);margin-bottom: 0.8rem;">
                  <div class="boxall">
                    <div class="alltitle">设备综合效率</div>
                    <div class="allnav">
                      <div id="chart0" style="height:calc(100%);"></div>

                      <!-- <div style="line-height: 2rem;text-align: center;color: #bbb;margin-top: -0.8rem;">
                      OEE &nbsp;&nbsp;&nbsp;&nbsp;
                    </div> -->
                    </div>
                    <div class="boxfoot"></div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: calc(60% - 0.4rem);height:100%;">
              <div style="height: calc(100%-1.6rem);margin-bottom:0.8rem;">
                <div class="boxall" style="height:calc(100% - 0.8rem)" id="wipbox">
                  <div class="allnav flex" style="width:calc(100%);height:calc(100%)">
                    <div class="allnavTab" style="height:calc(100%)">
                      <div class="alltitle">时间稼动率</div>
                      <div id="chart1" style="height:calc(70%);"></div>
                      <div class="titleContent" style="text-align: center" :style="{color:aColor}">
                        {{ timeValue || 0 }}%
                      </div>
                    </div>
                    <div class="allnavTab">
                      <div class="alltitle">性能稼动率</div>
                      <div id="chart2" style="height:calc(70%);"></div>
                      <div class="titleContent" style="text-align: center" :style="{color:pColor}">
                        {{ performanceValue || 0 }}%
                      </div>
                    </div>
                    <div class="allnavTab">
                      <div class="alltitle">合格品率</div>
                      <div id="chart3" style="height:calc(70%);"></div>
                      <div class="titleContent" style="text-align: center" :style="{color:qColor}">
                        {{ qualifiedValue || 0 }}%
                      </div>
                    </div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex" style="width: 100%;height:calc(50%);">
            <div style="height: calc(100%);width: 100%;" class="flex">
              <div style="width: calc(25% - 0.4rem);height:100%;margin-right:0.8rem;">
                <div class="boxall">
                  <div class="alltitle">{{ kbName }} 工作状态</div>
                  <div class="allnav">
                    <div id="chart4" style="height:calc(100% - 1.6rem);"></div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
              <div style="width: calc(25% - 0.4rem);height:100%;margin-right:0.8rem;">
                <div class="boxall">
                  <div class="alltitle">{{ kbName }} 异常报警TOP3</div>
                  <div class="allnav">
                    <div id="chart5" style="height:calc(100% - 1.6rem);"></div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
              <div style="width: calc(50% - 0.4rem);height:100%;">
                <div class="boxall">
                  <div class="alltitle">{{ kbName }} UPH</div>
                  <div class="allnav">
                    <div id="chart6" style="height:calc(90% );"></div>
                  </div>
                  <div class="tabIcon" v-if="arrToObj">
                    <!-- <div style="width: 100px;height: 40px;background-color: red;"></div> -->
                    <i
                      class="el-icon-caret-left"
                      style="font-size: 30px;color: #1682ff;cursor: pointer;"
                      :style="{color:iconIndex==0 ? 'blue' : '' }"
                      @click="ClickIcon(0)"
                    ></i>
                    <i
                      class="el-icon-caret-right"
                      style="font-size: 30px;color: #1682ff;cursor: pointer;"
                      :style="{color:iconIndex== 1 ? 'blue' : '' }"
                      @click="ClickIcon(1)"
                    ></i>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">合肥智慧云上信息技术有限公司 技术支持</div>
      </div>
    </div>
  </body>
  <script src="./static/lodash.min.js"></script>
  <script src="./static/dayjs.js"></script>
  <script src="./static/layui/layer.js"></script>
  <script src="./static/element/index.js"></script>
  <script src="./static/echarts/echarts.min.js"></script>
  <script src="./static/echarts/my-echarts-theme.js"></script>
  <script>
    var URL = '/api/'
    // URL = 'http://localhost:8800/api/'
    // 全局刷新时间
    var timerT = 1000 * 60 * 3
    var knbTime = 1000 * 60
    // chart6 内容
    var newTmpArr = []
    var Charts6TimeArray = []
    // 设置圆环默认背景颜色
    var echartsBgColor = '#eeeeee'
    //根据窗口宽度动态设置根节点的字体大小
    var remPx = 12
    function setRem() {
      var html = document.getElementsByTagName('html')[0]
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      remPx = parseInt(oWidth / 80)
      html.style.fontSize = remPx + 'px'
    }
    setRem()
    var that = this
    //Echarts
    var chart0 = {}
    var chart1 = {}
    var chart2 = {}
    var chart3 = {}
    var chart4 = {}
    var chart5 = {}
    var chart6 = {}
    var chart0_default_option = {
      textStyle: {
        fontSize: 0.8 * remPx
      },
      series: [
        {
          name: 'chart0',
          type: 'gauge',
          min: 0,
          max: 120,
          splitNumber: 4,
          radius: '98%',
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              // color: [
              //   [0, '#DC143C'],
              //   // [0.8, 'orange'],
              //   // [1, 'green']
              // ],
              width: 6,
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            }
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: 'bolder',
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          axisTick: {
            // 坐标轴小标记
            length: 13, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            splitNumber: 5
          },
          splitLine: {
            // 分隔线
            length: 15, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              width: 3,
              color: 'auto',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            // 分隔线
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          title: {
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontSize: 1.8 * remPx,
              fontStyle: 'italic',
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail: {
            show: true,
            offsetCenter: [0, '80%'], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontSize: 3 * remPx,
              fontFamily: 'electronicFont'
            },
            formatter: function(v) {
              return v + '%'
            }
          },
          data: [
            {
              value: '',
              name: 'OEE'
            }
          ]
        }
      ]
    }
    var chart1_default_option = {
      title: {
        show: false,
        text: 90 + '%',
        top: '86%',
        left: '44%',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 1.8 * remPx,
          fontFamily: 'electronicFont'
        }
      },

      graphic: {
        type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
        left: 'center', // 同上
        style: {
          text: 'A', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
          fill: '#fff', // 填充色。
          fontSize: 3.2 * remPx, // 字体大小
          fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
        }
      },

      color: [],
      series: [
        {
          name: 'chart1',
          type: 'pie',
          radius: ['60%', '75%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    }
    var chart2_default_option = {
      title: {
        show: false,
        text: 90 + '%',
        top: '82%',
        left: '44%',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 1.4 * remPx,
          color: '#FFB800',
          fontFamily: 'electronicFont'
        }
      },
      graphic: {
        type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
        left: 'center', // 同上
        style: {
          text: 'P', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
          fill: '#fff', // 填充色。
          fontSize: 3.2 * remPx, // 字体大小
          fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
        }
      },
      color: [],
      series: [
        {
          name: 'chart1',
          type: 'pie',
          radius: ['60%', '75%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    }
    var chart3_default_option = {
      title: {
        show: false,
        text: 90 + '%',
        top: '82%',
        left: '44%',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 1.4 * remPx,
          color: '#FFB800',
          fontFamily: 'electronicFont'
        }
      },
      graphic: {
        type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
        left: 'center', // 同上
        style: {
          text: 'Q', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
          fill: '#fff', // 填充色。
          fontSize: 3.2 * remPx, // 字体大小
          fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
        }
      },
      color: [],
      series: [
        {
          name: 'chart1',
          type: 'pie',
          radius: ['60%', '75%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    }
    var chart4_default_option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
      },
      color: ['#67C23A', '#F56C6C', '#E6A23C'],
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        itemWidth: 15,
        itemHeight: 8,
        textStyle: {
          //图例文字的样式
          color: '#fff',
          fontSize: 0.8 * remPx
        }
      },
      textStyle: {
        fontSize: 0.8 * remPx
      },
      series: [
        {
          name: '工作状态(秒)',
          type: 'pie',
          radius: '50%',
          data: [],
          label: {
            normal: {
              show: true,
              formatter: '{d}%'
            },
            textStyle: {
              fontWeight: 'normal',
              fontSize: 1.2 * remPx
            },
            labelLine: { show: true }
          },

          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    var chart5_default_option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
      },
      color: ['#d9b3ff', '#79d2d2', '#a45128'],
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        itemWidth: 15,
        itemHeight: 8,
        textStyle: {
          //图例文字的样式
          color: '#fff',
          fontSize: 0.8 * remPx
        }
      },
      textStyle: {
        fontSize: 0.8 * remPx
      },
      series: [
        {
          name: '异常报警(次)',
          type: 'pie',
          radius: ['30%', '50%'],
          data: [],
          label: {
            normal: {
              show: true,
              formatter: '{c}'
            },
            textStyle: {
              fontWeight: 'normal',
              fontSize: 1.8 * remPx,
              fontColor: '#000'
            },
            labelLine: { show: true }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    var chart6_default_option = {
      tooltip: {
        trigger: 'axis',
        formatter: params => {
          var str = ''
          let tIndex = Charts6TimeArray.indexOf(params[0].axisValue)
          for (var i = 0; i < params.length; i++) {
            if (params[i].value[params[i].seriesName] && params[i].seriesName != 'target') {
              str +=
                '<p style="width:140px;">' +
                newTmpArr[tIndex][params[i].seriesName].model_code +
                ': ' +
                '产出' +
                params[i].value[params[i].seriesName] +
                ', UPH达成率: ' +
                newTmpArr[tIndex][params[i].seriesName].rate +
                '%' +
                '</p>'
            }
          }
          var tooltipHtml = ''
          if (str) {
            tooltipHtml = '<div style="width:300px;overflow-y:auto">' + str + '</div>'
          }
          // var tooltipHtml = '<div style="width:300px;overflow-y:auto">'+str+'</div>';
          return tooltipHtml
        },
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        show: false,
        orient: 'horizontal',
        x: 'center',
        y: '80%',
        textStyle: {
          //图例文字的样式
          color: '#fff',
          fontSize: 1.2 * remPx
        }
      },
      grid: {
        top: '12%',
        left: '5%',
        right: '5%',
        bottom: '0%',
        containLabel: true
      },
      dataset: {
        dimensions: [],
        source: []
      },
      color: [],
      xAxis: [
        {
          type: 'category',
          // data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'],
          axisLabel: {
            show: true,
            textStyle: {
              // 字体配置
              color: '#fff',
              fontSize: 0.6 * remPx,
              lineHeight: 14
            }
            // rotate: 40// 是否旋转
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              // 字体配置8:30
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: false // Y轴
          }
        }
      ],
      series: []
    }

    //列表滚动计算准备
    var lineMaxRow = 1

    //窗口大小变化监听
    window.onresize = function() {
      setRem()
      chart0.resize()
      chart1.resize()
      chart2.resize()
      chart3.resize()
      chart4.resize()
      chart5.resize()
      chart6.resize()
    }

    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          kbName: '',
          query: {
            day: null,
            lineCode: ''
          },
          lineIndex: 0, //一分钟切换一次默认第一个
          lineArr: null, //一分钟切换一次的内容 //判断条件
          lineSelectShow: true, // 线体选择
          linelist: [],
          aColor: null,
          pColor: null,
          qColor: null,
          timeValue: null,
          performanceValue: null,
          qualifiedValue: null,
          // 图6数据
          arrToObj: [],
          iconIndex: 1,
          remPx: remPx, //根字体大小px
          timer: null, //拉取数据定时器
          knbOneMinT: null, //一分钟切换一次
          timerTime: null,
          showData: {
            today: null,
            qualityData: { fpy_target: 80, fpy: 100 }
          }
        }
      },
      methods: {
        ClickIcon(v) {
          if (!this.arrToObj) return
          this.iconIndex = v
          let newArr = []
          if (v == 1) {
            newArr = this.arrToObj.slice(12, 24)
          } else {
            newArr = this.arrToObj.slice(0, 12)
          }
          chart6.setOption({
            dataset: { source: newArr }
          })
        },
        initCharts: async function() {
          chart0 = echarts.init(document.getElementById('chart0'), 'mytheme')
          chart0.setOption(chart0_default_option)

          chart1 = echarts.init(document.getElementById('chart1'), 'mytheme')
          chart1.setOption(chart1_default_option)

          chart2 = echarts.init(document.getElementById('chart2'), 'mytheme')
          chart2.setOption(chart2_default_option)

          chart3 = echarts.init(document.getElementById('chart3'), 'mytheme')
          chart3.setOption(chart3_default_option)

          chart4 = echarts.init(document.getElementById('chart4'), 'mytheme')
          chart4.setOption(chart4_default_option)

          chart5 = echarts.init(document.getElementById('chart5'), 'mytheme')
          chart5.setOption(chart5_default_option)

          chart6 = echarts.init(document.getElementById('chart6'), 'mytheme')
          chart6.setOption(chart6_default_option)
        },
        searchData: function() {
          this.getKbnData()
        },
        // 获取路由参数
        GetQueryString: function(name) {
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = window.location.search.substr(1).match(reg)
          if (r != null) return unescape(r[2])
          return null
        },
        // 获取看板数据
        getKbnData: function() {
          let that = this
          //获取看板数据
          $.ajax(URL + 'Oee/report/kbndata', {
            type: 'get',
            data: that.query,
            success: function(r) {
              let res = r.data
              that.kbName = res.machineDesc
              that.arrToObj = []
              if (!res) {
                that.$message.error('当前暂无数据')
                return
              }

              // chart0
              let colorChart0 = []
              let chart0Color = res.oeeColorRange
              let maxName = chart0Color[chart0Color.length - 1].max

              chart0Color.sort(function(a, b) {
                return a.max - b.max //根据max来排序
              })

              chart0Color.map(function(i) {
                colorChart0.push([i.max / 120, i.color])
              })
              chart0.setOption({
                series: [{ data: [{ value: res.oee, name: 'OEE' }], axisLine: { lineStyle: { color: colorChart0 } } }]
              })

              // charts1,2,3
              that.aColor = res.aColor
              that.pColor = res.pColor
              that.qColor = res.qColor
              that.timeValue = res.aRate
              that.performanceValue = res.pRate
              that.qualifiedValue = res.qRate
              chart1.setOption({
                series: [{ data: [{ value: res.aRate }, { value: res.aRate > 100 ? 0 : 100 - res.aRate }] }],
                color: [res.aColor, '#eeeeee']
              })
              chart2.setOption({
                series: [{ data: [{ value: res.pRate }, { value: res.pRate > 100 ? 0 : 100 - res.pRate }] }],
                color: [res.pColor, '#eeeeee']
              })
              chart3.setOption({
                series: [{ data: [{ value: res.qRate }, { value: res.qRate > 100 ? 0 : 100 - res.qRate }] }],
                color: [res.qColor, '#eeeeee']
              })

              // charts 4,5
              let chart4Array = res.machineData.timeData
              for (let d = 0; d < chart4Array.length; d++) {
                chart4Array[d]['value'] = chart4Array[d].seconds
              }
              chart4.setOption({
                series: [{ data: chart4Array }]
              })
              let chart5Array = res.machineData.alerData

              for (let e = 0; e < chart5Array.length; e++) {
                chart5Array[e]['value'] = chart5Array[e].cnt
              }
              chart5.setOption({
                series: [{ data: chart5Array }]
              })

              // chart6
              let chart6Array = res.uphData
              let chart6Color = chart6Array.colors
              let keyArray = chart6Array.serials
              that.arrToObj = chart6Array.data
              if (!res.uphData.data) {
                chart6.setOption({ dataset: { source: [] } })
                return
              }

              let newTmp = chart6Array.data
              let arrToObj = chart6Array.data
              var series = {
                name: '',
                type: 'bar',
                stack: 'Ad',
                emphasis: { focus: 'series' },
                itemStyle: { borderColor: '#fff' },
                barWidth: 15
              }
              var target = {
                name: '',
                type: 'line',
                smooth: false,
                color: '#1682ff',
                label: {
                  show: true,
                  position: 'top',
                  fontSize: that.remPx * 0.9,
                  fontWeight: 600
                }
              }
              let seriesArray = []
              let newTmpArrOnle = JSON.parse(JSON.stringify(that.arrToObj))
              newTmpArr = JSON.parse(JSON.stringify(that.arrToObj))
              for (let i = 0; i < keyArray.length; i++) {
                seriesArray.push(series)
                for (let j = 0; j < newTmp.length; j++) {
                  newTmp[j][keyArray[i]] = newTmp[j][keyArray[i]].qty || 0
                }
              }

              Charts6TimeArray = []
              for (let tt = 0; tt < newTmp.length; tt++) {
                Charts6TimeArray.push(newTmp[tt].time)
              }
              seriesArray.push(target)
              if (newTmp.length > 12) {
                that.iconIndex = 1
                newArr = newTmp.slice(12, 24)
              } else {
                newArr = newTmp.slice(0, 12)
              }
              // newArr = newTmp.slice(0, 12)
              keyArray.unshift('time')
              keyArray.push('target')
              var tmpOption = _.cloneDeep(chart6_default_option)
              tmpOption.dataset = { source: newArr, dimensions: keyArray }
              tmpOption.color = chart6Color
              tmpOption.series = seriesArray
              chart6.setOption(tmpOption, true)
            }
          })
        },
        // 时间获取
        formatDate: function() {
          var that = this
          $.ajax(URL + 'platform/time/sync', {
            type: 'get',
            success: function(r) {
              that.showData.today = r.data ? r.data : ''
            }
          })
        },
        // 时间获取
        formatDateDay: function() {
          var that = this
          $.ajax(URL + 'platform/time/sync', {
            type: 'get',
            success: function(r) {
              that.query.day = dayjs(r.data).format('YYYY-MM-DD')
              that.getLineData()
            }
          })
        },
        getLineData: function() {
          var that = this
          $.ajax(URL + 'Oee/report/configlinelist', {
            type: 'get',
            success: function(r) {
              that.linelist = r.data
              let name = that.GetQueryString('lineCode')
              that.lineArr = that.GetQueryString('lineCode')
              if (name) {
                that.query.lineCode = name
              } else {
                that.query.lineCode = r.data[0].line_code
              }
              if (that.lineArr && that.lineArr.split('|').length > 1) {
                that.lineSelectShow = false
                that.refreshDataOneMin()
              } else {
                that.getKbnData()
                that.refreshData()
              }
            }
          })
        },

        refreshData: function() {
          var that = this
          clearInterval(this.timer)
          //获取时间
          //获取看板数据
          // this.getKbnData()
          //数据拉取请求全部发起完成
          this.timer = setInterval(this.getKbnData, timerT) //定时执行下次数据拉取
        },
        refreshDataOneMin: function() {
          const that = this
          clearInterval(that.knbOneMinT)
          let arr = that.lineArr.split('|')
          that.query.lineCode = arr[0]
          that.getKbnData()
          that.knbOneMinT = setInterval(function() {
            if (that.lineIndex < arr.length - 1) {
              that.lineIndex++
            } else {
              that.lineIndex = 0
            }
            that.query.lineCode = arr[that.lineIndex]
            that.getKbnData()
          }, knbTime)
        },

        refreshTime: function() {
          var that = this
          clearInterval(this.timerTime)
          clearInterval(this.knbOneMinT)
          this.timerTime = setInterval(this.formatDate, 1000 * 60) //定时更新时间
        }
      },

      beforeDestroy() {
        window.clearInterval(this.timer)
        window.clearInterval(this.knbOneMinT)
        window.clearInterval(this.timerTime)
      },
      created() {
        this.formatDateDay()
        this.formatDate()
      },

      mounted: function() {
        var that = this
        //初始化Echarts
        that.initCharts()
        // that.refreshData()
        that.refreshTime()
      }
    })
  </script>
</html>
